<style>
.seglink {
    color: #c0c0c0;
}
</style>
<div class="outage-header">
    {{ _("Outages Summary") }}
    <a href="/api/card/view/totaloutage/1/" style="color: black">{{ summary | glyph_summary }}</a>
</div>

{% for segment in segments recursive%}
    {% set level = loop.depth0 %}
    <div class="outage-row">
        <div class="outage-segment">
            {{ segment["summary"] | glyph_summary }}<br>
            {{ segment["segment"].name }}
            <a href="/api/card/view/segmentalarm/{{ segment["segment"].id }}/" class="seglink"><i class="fa fa-eye"></i></a>
        </div>
        <div class="outage-segment-detail">
            {{ loop(segment["segments"]) }}
            {% for object in segment["objects"] %}
                <div class="outage-row">
                    <div class="outage-object">
                        {{ object["summary"] | glyph_summary }}<br/>
                        <a href="/api/card/view/alarm/{{ object["alarm"].id }}/">
                            {{ object["object"].name }}
                        </a>
                        <br/>
                        <span class="small">{{ object["object"] | object_location }}</span>
                    </div>
                    <div class="outage-object-detail">
                        {{ object["timestamp"] | timestamp }}<br/>
                        {{ object["duration"] }}
                        {% if object["escalation_tt"] %}
                            <br>
                            <a href="/api/card/view/tt/{{ object["escalation_tt"] }}/">
                                {{ object["escalation_tt"] }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}
